<template>
  <div class= "auto">
    <!-- <div style="text-align:center">欢迎</div>
    <div style="text-align:center">
      <span>{{orgCrumb}}</span>
      <img src="../../assets/mute.png" width="32" height="32" @click="mute"></img>
    </div> -->
    <route :comp="{name: 'attendance-tally'}" name="master-router"></route>
    <footer class="navbar-default navbar-fixed-bottom">
    <div class="container-fluid" style="align:center">
      <table width="100%" height="30px" align="center" style="text-align:center">
        <tr>
          <td @click="go2('attendance-tally')" width="16%">
            <table align="center">
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-user"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">考勤</th>
              </tr>
            </table>
          <td>
          <td @click="go2('track-state')" width="17%">
            <table>
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-map-marker"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">状态跟踪</th>
              </tr>
            </table>
          <td>
          <!-- <td @click="trackPlan">任务跟踪<td> -->
          <td @click="go2('task-follow')" width="17%">
            <table>
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-th"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">任务跟踪</th>
              </tr>
            </table>
          <td>
          <td @click="go2('system-setting')" width="17%">
            <table>
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-cog"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">系统设置</th>
              </tr>
            </table>
          <td>
          <td @click="go2('check-notice')" width="16%">
            <table>
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-bell"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">通知公告</th>
              </tr>
            </table>
          <td>
          <td @click="go2('phone-book')" width="17%">
            <table>
              <tr>
                <th style="text-align:center"><span class="glyphicon glyphicon-earphone"></span></th>
              </tr>
              <tr>
                <th style="text-align:center">通讯录</th>
              </tr>
            </table>
          <td>
        </tr>
      </table>
    </div>
    </footer>
    <menu :show.sync="showModal" small>
      <div slot="modal-body" class="modal-body">
        <table align="center">
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('checker-annual')">安检员年度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('checker-monthly')">安检员月度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('plumber-annual')">维修员年度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
          <tr><td @click="this.showModal = false, go2('plumber-monthly')">维修员月度任务跟踪</td></tr>
          <tr><td>&nbsp;</td></tr>
        </table>
      </div>
    <menu>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  title: '所长界面',
  data() {
    return {
      orgs : Vue.orgs,
      showModal: false
    }
  },
  computed: {
    orgCrumb: function() {
      let oc = []
      if(this.orgs) {
        this.orgs.filter((item) => {
          return item.level != 4
        }).forEach(function(org) {
            oc.push(org.name)
        })
      }
      return oc.join('--')
    }
  },
  methods: {
    go2: function(widget, param) {
      this.$goto(widget, {}, 'master-router')
    },
    mute: function() {
      HostApp.mute()
    },
    trackPlan: function() {
      this.showModal = true
    }
  },
}
</script>
